// 采样详情
import { defineComponent, ref, reactive, nextTick } from "vue";
import { VxeForm } from "vxe-table";
import CommonModal from "@/components/common-modal";
import { getPage, onSave } from "@/api/baseData/projectName";
import { detectionTypes, getDictLabel } from "@/libs/dict";

export default defineComponent({
  props: {
    modelValue: {
      type: Boolean,
      dafault: false,
    },
    contractId: String,
    selectRow: Object,
  },
  emits: ["update:modelValue", "change"],
  setup(props, { emit }) {
    const loading = ref(true);
    const form = ref(null);
    const listItems: any = ref([
      {
        field: "projectCode",
        title: "项目编码",
        span: 12,
        titleWidth: 100,
        itemRender: {
          name: "$input",
          props: {
            placeholder: "项目编码",
          },
        },
      },
      {
        field: "projectNameZhCn",
        title: "项目名称",
        span: 24,
        titleWidth: 100,
        itemRender: {
          name: "$input",
          props: {
            placeholder: "项目名称",
          },
        },
      },
      {
        field: "projectNameEn",
        title: "英文名称",
        span: 24,
        titleWidth: 100,
        itemRender: {
          name: "$input",
          props: {
            placeholder: "英文名称",
          },
        },
      },
      {
        field: "saturation",
        title: "饱和度(%)",
        span: 24,
        titleWidth: 100,
        itemRender: {
          name: "FormInput",
          props: {
            type: "number",
            placeholder: "饱和度(0-100)",
            max: 100,
            min: 0,
          },
        },
      },
      {
        field: "chemicalAbstracts",
        title: "化学文摘号",
        span: 24,
        titleWidth: 100,
        itemRender: {
          name: "$input",
          props: {
            placeholder: "化学文摘号",
          },
        },
      },
      {
        field: "remarks",
        title: "说明",
        span: 24,
        titleWidth: 100,
        itemRender: {
          name: "$textarea",
          props: {
            placeholder: "说明",
          },
        },
      },
    ]);

    const ruleValidate: any = reactive({
      projectCode: [
        {
          required: true,
          message: "项目编码为必填项",
          trigger: "change",
        },
      ],
      projectNameZhCn: [
        {
          required: true,
          message: "项目名称为必填项",
          trigger: "change",
        },
      ],
      projectNameEn: [
        {
          required: true,
          message: "项目名称为必填项",
          trigger: "change",
        },
      ],
    });
    let formValidate: any = reactive({});
    const detail = ref();

    const onOnVisibleChange = (visible) => {
      if (visible) {
        const row = props.selectRow;
        if (props.selectRow) {
          //   const row = props.selectRow;
          //   onDetail(row.id).then((res: any) => {
          //     detail.value = res;
          //     const detectionType = getDictLabel(
          //       detectionTypes,
          //       res.detectionType
          //     );
          //     Object.assign(formValidate, {
          //       ...res,
          //       taskDetailsDto: [res.taskDetailsDto],
          //       detectionType,
          //     });
          //   });
        }
      } else {
        detail.value = null;
      }
    };

    const onOk = (samplingTaskStatus) => {
      form.value.validate((errMap) => {
        if (errMap) {
          loading.value = false;
          nextTick(() => {
            loading.value = true;
          });
        } else {
          onSave(formValidate)
            .then((res) => {
              form.value.reset();
              emit("change");
              emit("update:modelValue", false);
            })
            .catch(() => {
              loading.value = false;
              nextTick(() => {
                loading.value = true;
              });
            });
        }
      });
    };

    const onCancel = () => {
      form.value.reset();
      emit("update:modelValue", false);
    };

    return () => {
      return (
        <CommonModal
          title={"新增"}
          model-value={props.modelValue}
          onOnCancel={onCancel}
          loading={loading.value}
          width={800}
          isDetail={props.selectRow && props.selectRow.isDetail}
          onOnVisibleChange={onOnVisibleChange}
          isDrawer={props.selectRow && props.selectRow.isDetail}
          onOnOk={onOk}
          v-slots={{
            default: () => {
              return (
                <VxeForm
                  title-colon
                  ref={form}
                  title-width="160"
                  titleAlign="right"
                  data={formValidate}
                  rules={ruleValidate}
                  span={24}
                  items={listItems.value}
                  prevent-submit={true}
                ></VxeForm>
              );
            },
          }}
        ></CommonModal>
      );
    };
  },
});
